@import '../../../var';

/*!
 * Page: mall/pay/pay
 * License: MIT
 * Created: 2019-08-27 10:46
 */

page {
  background-color: $bgcolor-light;
  .header {
    width: 750rpx;
    height: 380rpx;
    background: $primary-color;
    .title {
      width: 100%;
      color: $title-color;
      font-size: 36rpx;
      text-align: center;
    }
    .address {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 440rpx;
      height: 80rpx;
      margin: 71rpx 155rpx;
      color: $title-color;
      font-size: 30rpx;
      background: rgba(0, 0, 0, 0);
      border: 2rpx solid rgba(26, 26, 26, 0.45);
      border-radius: 10rpx;
    }
    .hasAddress {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 690rpx;
      height: 80rpx;
      margin: 40rpx 30rpx;
      .addressInfo {
        width: 676rpx;
        height: 100%;
        color: rgba(26, 26, 26, 1);
        font-size: 30rpx;
        .addressList {
          display: flex;
          align-items: center;
          .imgBox {
            width: 27rpx;
            height: 32rpx;
            margin: 10rpx 23rpx 10rpx 0rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .addressDetail {
            width: 500rpx;
          }
        }
      }
      .rightIcon {
        width: 14rpx;
        height: 24rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .section {
    position: relative;
    top: -20rpx;
    width: 100%;
    padding: 44rpx 30rpx;
    background: $bgcolor-light;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    .title {
      color: rgba(153, 153, 153, 1);
      font-size: 24rpx;
    }
    .marginTop {
      margin-top: 44rpx;
    }
    .productInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 690rpx;
      margin-top: 36rpx;
      .productImg {
        display: flex;
        align-items: center;
        width: 120rpx;
        height: 120rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .productTitle {
        width: 400rpx;
        color: rgba(26, 26, 26, 1);
        font-size: 28rpx;
        .productName {
          width: 400rpx;
        }
        .buyRules {
          color: rgba(153, 153, 153, 1);
          font-size: 20rpx;
        }
      }
      .productNumber {
        display: flex;
        align-items: center;
        image {
          display: block;
          width: 40rpx;
          height: 40rpx;
        }
        .count {
          min-width: 40rpx;
          text-align: center;
        }
      }
    }
    .optionsBox {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin: 30rpx 0 10rpx 0;
      border-bottom: 1rpx solid #e6e6e6;
      .options {
        margin: 0 30rpx 20rpx 0;
        padding: 13rpx 24rpx;
        color: $disabled-color;
        font-size: 24rpx;
        background: #f7f7f7;
        border-radius: 8rpx;
      }
      .active {
        color: $title-color;
      }
    }
    .priceBox {
      width: 100%;
      margin-top: 50rpx;
      color: $info-color;
      font-size: 22rpx;
      .priceRules {
        display: flex;
        flex: 1;
        justify-content: space-between;
        line-height: 36rpx;
      }
      .priceColor {
        color: $price-color;
      }
      .countPrices {
        display: flex;
        flex: 1;
        justify-content: space-between;
        margin-top: 14rpx;
        color: $title-color;
        font-weight: 600;
        .priceTitle {
          font-size: 28rpx;
        }
        .prices {
          font-size: 30rpx;
        }
        .score {
          font-size: 22rpx;
          text {
            color: $info-color;
          }
        }
      }
    }
    .inputBox {
      display: flex;
      align-items: center;
      width: 688rpx;
      height: 70rpx;
      margin-top: 50rpx;
      padding: 0rpx 20rpx;
      background: rgba(247, 247, 247, 0);
      border: 1rpx solid rgba(230, 230, 230, 1);
      border-radius: 12rpx;
      input {
        width: 100%;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0rpx;
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 100rpx;
    border-top: 1rpx solid #f2f2f2;
    .price {
      display: flex;
      flex: 0.68;
      align-items: center;
      padding: 0rpx 30rpx;
      .countPrice {
        font-size: 30rpx;
      }
      .priceRules {
        color: #666666;
        font-size: 20rpx;
      }
    }
    .pay {
      display: flex;
      flex: 0.32;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: 32rpx;
      background: $primary-color;
    }
  }
  .cover {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(#000, 0.4);
  }
  .confirm {
    z-index: 900;
    width: 560rpx;
    overflow: hidden;
    background-color: #fff;
    border-radius: 10rpx;
    .text {
      min-height: 200rpx;
      padding: 54rpx;
      color: $text-color;
    }
    .bottoms {
      display: flex;
      align-items: center;
      height: 90rpx;
      .submits {
        display: flex;
        flex: 0.7;
        align-items: center;
        justify-content: center;
        height: 100%;
        background-color: $primary;
      }
      .cancel {
        display: flex;
        flex: 0.3;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #fff;
        background-color: #ddd;
      }
    }
  }
  .covers {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    .confirm {
      z-index: 900;
      width: 400rpx;
      height: 542rpx;
      overflow: hidden;
      background-color: #fff;
      border-radius: 10rpx;
      box-shadow: 0rpx 0rpx 50rpx 7rpx rgba(3, 3, 3, 0.15);
      .imgBox {
        width: 258rpx;
        height: 188rpx;
        margin: 40rpx auto 24rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .payTitle {
        width: 100%;
        margin-bottom: 30rpx;
        color: $success-color;
        font-size: 33rpx;
        text-align: center;
      }
      .failure {
        color: rgba(179, 179, 179, 1);
      }
      .showBottom {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 259rpx;
        height: 56rpx;
        margin: auto;
        margin-top: 26rpx;
        color: rgba(26, 26, 26, 1);
        font-size: 26rpx;
        background: rgba(255, 255, 255, 1);
        border: 1rpx solid rgba(230, 230, 230, 1);
        border-radius: 28rpx;
      }
    }
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 62rpx;
  margin: 0 30rpx 0 auto;
  color: #ffffff;
  font-weight: 600;
  font-size: 28rpx;
  background: linear-gradient(214deg, rgba(252, 42, 64, 1) 0%, rgba(252, 122, 45, 1) 100%);
  border-radius: 32rpx;
}

.disable {
  opacity: 0.4;
}
